<template>
  <div class="setting-wrapper">
    <div class="setting-header">
      <span class="back" @click="back"><i class="el-icon-arrow-left">返回</i></span>
      {{fileType === '1' ? '签章申请': '文件签发'}}
    </div>
    <div class="setting-data">
      <div>
        <el-button style="position:absolute;right: 48px;top: 23px;" type="primary" icon="el-icon-edit" size="mini" @click="saveForm">保存</el-button>
        <div class="data-header">新建{{fileType === '1' ? '签章申请': '文件签发'}}</div>
        <div class="data-content">
          <inputComponent v-for="item in modelInfo.fieldList" :key="item.id" :inputObject="item"/>
          <div class="form-row" style="margin-top: 32px;">
            <span class="label">附件添加：</span> <span class="tip">(只支持pdf格式,签章申请前先解密文件,文件签发前先加密文件)</span>
            <div style="margin-top: 16px;"> 
              <el-button type="primary" icon="el-icon-upload2" size="mini" @click="$refs.uploadInput.click()">上传文件</el-button>
              <input ref="uploadInput" style="display:none;" type="file" multiple @change="uploadFile($event, 1)">
              <div class="filewrapper" style="display: inline-block;vertical-align: top;">
                <div class="fileitem" v-for="(file, idx) in form.fileList" :key="idx">
                  <span>{{file.name}}</span>
                  <span class="uploadtip" v-if="file.orinUrl" @click="delFile(idx)"><i class="el-icon-delete"></i></span>
                  <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.orinUrl">上传中<i class="el-icon-loading"></i></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
     <div class="setting-data" style="padding-top: 0;">
      <div>
        <div class="data-header">流程</div>
        <div class="process-wrapper">
          <div v-for="(item, idx) in modelInfo.modelSteps" :key="item.id" class="process-content">
            <div>{{item.stepName}}</div>
            <div>{{peopleCollect[idx].ids.length === 0? '请选择': '已选' + peopleCollect[idx].ids.length +'人'}}</div>
            <span class="btn"><i class="el-icon-circle-plus-outline" @click="selectDingUsers(item.candidatesLimit, idx)"></i></span>
            <div class="select-people">
              <div v-for="(id, peopleIdx) in peopleCollect[idx].ids" :key="id" class="people">
                <img :src="peopleCollect[idx].avatars[peopleIdx]" alt="">
                <p>{{peopleCollect[idx].names[peopleIdx]}}</p>
                <span class="delpeople" @click="delpeople(idx, peopleIdx)"><i class="el-icon-close"></i></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from "@/utils/formUtil";
import inputComponent from '@/views/modules/sign/inputComponent'

export default {
  data() {
    return {
      test: {
        val: ''
      },
      tableData: [],
      form: {
        initiator: '',
        initiatorName: '',
        fileList: [],
        modelId: '1',
        formData: [],
        stepList: []
      },
      fileType: '',
      modelInfo: {
        fieldList: [],
        modelSteps: []
      },
      peopleCollect: []
    }
  },
  components: {
    inputComponent
  },
  async mounted() {
    this.fileType = this.$route.params.type;
    this.form.modelId = this.fileType;
    this.form.initiator = this.userInfo.dingId;
    this.form.initiatorName = this.userInfo.realName;

    if(this.form.modelId === '1') {
      this.modelInfo = await this.$httpN.postQ('audit/model/info', {id: 1});
      this.modelInfo.modelSteps.push({
        id: 999,
        stepName: '抄送人',
        candidatesLimit: 100
      })
    }else {
      this.modelInfo = await this.$httpN.postQ('audit/model/info', {id: 2});
    }
    this.modelInfo.modelSteps.forEach((item) => {
      this.peopleCollect.push({
        ids: [],
        names: [],
        avatars: []
      })
    })

    if(this.form.modelId === '1') {
      let result = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: '1306402116848410626'});
      this.peopleCollect[5].ids = result.map((item) => item.emplId);
      this.peopleCollect[5].names = result.map((item) => item.name);
      this.peopleCollect[5].avatars = result.map((item) => item.avatar);

      let result2 = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: '1310462391117508609'});
      this.peopleCollect[3].ids = result2.map((item) => item.emplId);
      this.peopleCollect[3].names = result2.map((item) => item.name);
      this.peopleCollect[3].avatars = result2.map((item) => item.avatar);

      let result3 = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: '1302848230384566273'});
      this.peopleCollect[4].ids = result3.map((item) => item.emplId);
      this.peopleCollect[4].names = result3.map((item) => item.name);
      this.peopleCollect[4].avatars = result3.map((item) => item.avatar);

      this.peopleCollect[0].ids.push(this.userInfo.dingId);
      this.peopleCollect[0].names.push(this.userInfo.realName);
      this.peopleCollect[0].avatars.push(this.userInfo.avatar);

    }
  },
  mixins: [dingMixin],
  methods:{
    delpeople(idx,peopleIdx) {
      this.peopleCollect[idx].ids.splice(peopleIdx, 1);
      this.peopleCollect[idx].names.splice(peopleIdx, 1);
      this.peopleCollect[idx].avatars.splice(peopleIdx, 1);
    },
    selectDingUsers(size, idx) {
      this.complexPicker(size, [], this.peopleCollect[idx].ids).then(
        data => {
          this.peopleCollect[idx].ids = data.map(item => item.emplId);
          this.peopleCollect[idx].names = data.map(item => item.name);
          this.peopleCollect[idx].avatars = data.map(item => item.avatar);
        }
      );
    },
    back() {
      this.$router.go(-1);
    },
    delFile(idx) {
      this.form.fileList.splice(idx, 1)
    },
    async uploadFile(e) {
      var files = e.target.files;
      var $this = this;
      Object.keys(files).forEach(function(key){
        var file = files[key];
        if(!/\.(pdf)$/.test(file.name)) return $this.$message.error('文件格式不正确');
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        formData.append("module", 'audit_model1');
        let newfile = {
          name: file.name,
          orinUrl: '',
        }
        $this.form.fileList.push(newfile)
        $this.$httpN.upload('fileUpload', formData).then(res => {
          if(res.data.code === 0) {
            newfile.orinUrl = res.data.url;;
          }else if(res.data.code === 500) {
            $this.form.fileList.pop();
          }
        })
      })
      e.target.value = '';
    },
    async saveForm() {
      if(this.form.fileList.length === 0) return formUtil.submitError('请上传附件');
      let pass = true;
      this.form.fileList.forEach((item) => {
        if(item.orinUrl === '') pass = false;
      })
      if(!pass) return formUtil.submitError('文件正在上传中,请稍后');


      this.modelInfo.modelSteps.forEach((item, idx) => {
        item.candidatesId = this.peopleCollect[idx].ids.join(',');
        item.candidatesName = this.peopleCollect[idx].names.join(',');
      })

      this.form.formData = this.modelInfo.fieldList;
      this.form.stepList = this.modelInfo.modelSteps;
      
      let cansend = true;
      let param = '';
      this.form.formData.forEach((item) => {
        if(item.must && (item.val === undefined || item.val === '')) {
          cansend = false;
          param = item.label;
        }
      })

      if(!cansend) return formUtil.submitError(`请输入${param}`);
      this.form.stepList.forEach((item) => {
        if(item.must && item.candidatesId.length === 0) {
          cansend = false;
          param = item.stepName;
        }
      })
      if(!cansend) return formUtil.submitError(`请选择${param}`);

      if(this.form.modelId === '1') {
        this.form.ccIds = this.peopleCollect[5].ids.join(',');
        this.form.ccNames = this.peopleCollect[5].names.join(',');
        this.form.stepList.pop();
      }
      if (!(await this.$httpN.postB("audit/process/start", this.form))) return;
      formUtil.submitSuccess("保存成功");
      window.NEEDREFRESH = true;
      this.$router.push({ name: 'sign-list'})
    }
  }
}
</script>

<style lang="scss" scoped>
  .setting-wrapper{
    background: #F5F5F7;
    min-height: 100vh;
    .setting-header{
      height: 64px;
      background: #00A0E9;
      font-size: 18px;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 64px;
      text-align: center;
      position: relative;
      .back{
        font-size: 16px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 22px;
        position: absolute;
        left: 32px;
        top: 21px;
        cursor: pointer;
      }
    }
    .setting-data{
      >div{
        position: relative;
        // min-height: calc(100vh - 150px);
        background: #FFF;
        border-radius: 8px;
        box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
      }
      padding: 32px;
      .data-header{
        line-height: 78px;
        font-size: 22px;
        font-weight: bold;
        color: #6E6E73;
        line-height: 78px;
        padding-left: 32px;
        border-bottom: 2px solid #F3F3F3;
      }
      .data-content{
        margin-top: 2px;
        // min-height: 500px;
        padding: 16px 32px 64px;
        .form-row{
          .label{
            font-size: 16px;
            color: #262626;
          }
          input{
            width: 408px;
            height: 32px;
            border-radius: 2px;
            border: 1px solid #BFBFBF;
            padding-left: 12px;
          }
          .tip{
            font-size: 14px;
            font-weight: 400;
            color: red;
          }
          textarea{
            display:block;
            width: 548px;
            height: 102px;
            font-size: 14px;
            font-weight: 400;
            border: 1px solid #BFBFBF;
            margin-top: 16px;
            padding: 8px;
            border-radius: 2px;
            resize:none;
          }
          .people{
            display: inline-block;
            border-radius: 2px;
            border: 1px solid rgba(0, 0, 0, 0.15);
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
            line-height: 24px;
            padding: 0 30px 0 8px;
            position: relative;
            border-radius: 2px;
            margin-right: 5px;
            .btn{
              position: absolute;
              right:5px;
              top:6px;
              width: 13px;
              height: 13px;
              background: #D9D9D9;
              color: white;
              cursor: pointer;
              border-radius: 50%;
              line-height: 13px;
              i{
                font-size: 12px;
              }
            }
          }
          .add-btn{
            cursor: pointer;
            font-size: 22px;
            vertical-align: middle;
            margin-left:11px;
            color: #1890FF;
          }
        }
      }
      .process-wrapper{
        padding-left: 99px;
        padding-right: 32px;
        padding-bottom: 64px;
        .process-content{
          padding: 25px 0;
          border-bottom: 1px solid #DFDFE0;
          position: relative;
          >div:first-child{
            color: #6E6E71;
            font-size: 16px;
          }
          >div:nth-child(2){
            color: #6E6E71;
            font-size: 14px;
            margin-top:4px;
          }
          .btn{
            cursor: pointer;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto 0;
            font-size: 40px;
            color: #1890FF;
            width: 40px;
            height:40px;
          }
          &::before{
            content: '';
            display: block;
            width: 6px;
            height: calc(100% + 1px);
            position: absolute;
            left: -42px;
            top: 0;
            background: #69B2FF;
          }
          &::after{
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            position: absolute;
            top:  0;
            bottom: 0;
            margin: auto 0;
            left: -47px;
            background: #1890FF;
            border-radius: 50%;
            z-index:2;
          }
          .select-people{
            position: absolute;
            right: 60px;
            top: 18px;
            .people{
              display:inline-block;
              margin-left: 20px;
              position: relative;
              img{
                width: 32px;
                height: 32px;
                border-radius: 50%;
                border: 1px solid #DDD;
              }
              p{
                margin: 7px 0 0;
                font-size: 12px;
                color:#6E6E71;
                text-align: center;
              }
              .delpeople{
                position: absolute;
                right: 0;
                top: -6px;
                background: #191F25;
                color: white;
                border-radius: 50%;
                font-size: 12px;
                padding: 1px;
                cursor: pointer;
                i{
                  vertical-align: bottom;
                }
              }
            }
          }
        }
        >.process-content:first-child{
          &::before{
            content: '';
            display: block;
            width: 6px;
            height: calc(50% + 1px);
            position: absolute;
            left: -42px;
            top: 50%;
            background: #69B2FF;
          }
        }
        >.process-content:last-child{
          &::before{
            content: '';
            display: block;
            width: 6px;
            height: calc(50% + 1px);
            position: absolute;
            left: -42px;
            top: 0;
            background: #69B2FF;
          }
        }
      }
    }
  }
  .fileitem{
    line-height: 25px;
    margin-bottom: 5px;
    padding-left:15px;
    font-size: 14px;
    color: #AEAEB0;
    .uploadtip{
      cursor: pointer;
    }
  }
</style>